
<template>

  <div class="app-container">
    <el-form ref="form" :model="form" label-width="120px">
      <el-form-item label="服务包名称">
        <el-input v-model="form.name"/>
      </el-form-item>
      <el-form-item label="服务包类型">
        <el-select v-model="form.typeId" placeholder="服务包类型">
          <el-option v-for="level in levels" :key="level.id" :label="level.name" :value="level.id"/>
        </el-select>
      </el-form-item >
      <el-form-item label="服务包标签">
        <el-select v-model="pLabel" multiple placeholder="请选择" value-key="id">
          <el-option v-for="label in labels" :label="label.name" :value="label.id" :key="label.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="服务包图片">
          <div v-for="imag in form.images" class="pic" v-if:="imagesV">

            <img :src="imag.images"  width="260px">

          <el-col :span="3" style="float: right">
            <el-input v-model="imag.indexs" placeholder="请输入排序" size="mini" ></el-input>
            <el-button type="danger" icon="el-icon-delete" circle size="mini" @click="delImages(imag)" />
          </el-col>
            <br>



          </div>

        <div style="width: 260px; height: 50px"/>



          <el-upload
            style="float: left"
            name="file"
            class="avatar-uploader"
            action="http://localhost:8080/upload/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="nextImage.images!=''" :src="''+nextImage.images" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" ></i>
          </el-upload>

        <br>

        <div>
          <el-col :span="3">
            <el-input v-model="nextImage.indexs" placeholder="请输入排序" size="mini" ></el-input>
            <el-button type="success" icon="el-icon-check" size="mini" @click="addImage" style="" circle></el-button>
          </el-col>
        </div>






      </el-form-item>

      <el-form-item label="服务包价格/元">
        <el-input v-model="form.price"/>
      </el-form-item>
      <el-form-item label="服务对象">
        <el-input v-model="form.object"/>
      </el-form-item>
      <el-form-item label="签约周期/年">
        <el-input v-model="form.cycle"/>
      </el-form-item>

      <el-form-item label="续费状况">
          <label>  不可续签</label> <el-switch v-model="form.renew" active-value=1 inactive-value=0 /> <label> 可续签</label>
      </el-form-item>
      <el-form-item label="服务包状态">
        <el-radio-group v-model="form.state" @change="loggg">
          <el-radio label="0" >未审核</el-radio>
          <el-radio label="1" >使用中</el-radio>
          <el-radio label="2" >停用</el-radio>
          <el-radio label="3" >驳回</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="form.notes" type="textarea"/>
      </el-form-item>
      <el-form-item label="服务项目">
        <el-table :data="allItem" fit highlight-current-row ref="multipleTable"
                  tooltip-effect="dark"
                  style="width: 100%"
                  @selection-change="handleSelectionChange" >
          <el-table-column type="selection" width="55" ></el-table-column>

          <el-table-column prop="id" label="项目编号" width="100"></el-table-column>
          <el-table-column prop="name" label="项目名称" width="100" ></el-table-column>
          <el-table-column prop="times" label="次数"  width="100"></el-table-column>
          <el-table-column prop="type" label="项目类型" width="100">
            <template slot-scope="scope">
              {{scope.row.type==0?'免费':'付费'}}
            </template>
          </el-table-column>
          <el-table-column prop="price" label="项目原价（元）"  width="150"></el-table-column>
          <el-table-column prop="introduce" label="项目介绍"  width="460"></el-table-column>
        </el-table>
      </el-form-item>

      <el-form-item>
        <el-select v-model="addItemList" multiple placeholder="请选择" value-key="id">
          <el-option v-for="item in allItem" :label="item.name" :value="item.id" :key="item.id">
          </el-option>
        </el-select>
      </el-form-item>




      <el-form-item>
        <el-button type="primary" @click="submitForm">修改</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>

<script>
import item from "../item/item";

Array.prototype.remove = function(val) {
  const index = this.indexOf(val);
  if (index > -1) {
    this.splice(index, 1);
  }
};
import axios from "axios";



export default {
  data() {
    return {
      imagesV:false,
      itemIds:[],
      items:[],
      levels:[],
      pLabel:[],
      form: {

      },
      addItemList:[],
      allItem:[],
      labels:[],
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      nextImage:{
        images:''
      }
    }
  },
  methods: {
    handleAvatarSuccess(res, file){
      console.log("后台返回的图片名称为：", res.data);
      this.nextImage.images = 'http://rj0158yod.hd-bkt.clouddn.com/'+res.data;
      console.log("iiiiiiii", this.nextImage)
    },
    beforeAvatarUpload(file){
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },

    loggg(){
      //console.log(this.form)
    },
    getLevel(){
      axios.get('http://localhost:8080/package-type').then(r=>{

        this.levels=r.data.data;
      })
    },
    submitForm() {
      //提交服务包主题修改
        axios.put('http://localhost:8080/package',this.form).then(r=>{

        })
      //删除所有服务项目关联后，添加新的关联
        axios.delete('http://localhost:8080/package-item-contact/'+this.$route.params.id).then(r=>{
          if(this.addItemList.length>0)axios.post('http://localhost:8080/package-item-contact?packageId='+this.$route.params.id,this.addItemList)
        })

      //删除所有图片关联后，添加新的图片关联
      axios.delete('http://localhost:8080/package-images-contact?packageId='+this.$route.params.id).then(r=>{

        this.form.images.forEach(image=>{
          axios.post('http://localhost:8080/package-images-contact',image)
        })
      })

      //删除所有标签，添加新的标签关联
      axios.delete('http://localhost:8080/package-label-contact/'+this.$route.params.id).then(r=>{
        axios.post('http://localhost:8080/package-label-contact?packageId='+this.$route.params.id,this.pLabel)
      })

      //增加修改记录
      axios.post('http://localhost:8080/package-record',{packageId: this.form.id, processDoctorId: 0, state: 4, submitDoctorId: 0
      })
      this.$message.success('修改成功')
      this.$router.push('/package/detail/'+this.$route.params.id)
    },
    onCancel() {
      this.$message({
        message: '未保存修改',
        type: 'warning'
      })
      this.$router.go(-1)

    },
    handleRemove(file) {
      console.log(1111);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    toggleSelection(row) {
      if (row) {
        this.$refs.multipleTable.toggleRowSelection(row);
      }
       else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.addItemList=[];
      for (let i = 0; i < val.length; i++) {
        this.addItemList.push(val[i].id)
      }
      console.log(this.addItemList)

    },
    delImages(imag){
      this.imagesV=false;
      this.form.images.remove(imag)
      console.log(this.form.images)
      this.imagesV=true;
    },
    addImage(){
      this.imagesV=false
      this.nextImage.packageId=this.$route.params.id;
      this.form.images.push(this.nextImage)
      this.nextImage={images:''}
      console.log(this.form.images)
      this.imagesV=true


    }
  },
   created(){

     axios.get('http://localhost:8080/label').then(r=>{
       this.labels=r.data.data;

       axios.post('http://localhost:8080/package-label-contact/search/'+1+'/'+100,{other:{package_id:this.$route.params.id}}).then(r=>{

         r.data.data.data.forEach(label=>{
           this.pLabel.push(label.labelId);
         })


       })
     })



     axios.get('http://localhost:8080/item').then(r=>{
       this.allItem=r.data.data;
       console.log(this.allItem)
     })
     axios.post('http://localhost:8080/package-item-contact/search/'+1+'/'+100,{other:{package_id:this.$route.params.id}}).then(r=>{
      this.itemIds=r.data.data.data;
       console.log(this.itemIds)
       let t=0;
       for(let i=0;i<this.itemIds.length;i++){
         axios.post('http://localhost:8080/item/search/'+1+'/'+100,{other:{id:this.itemIds[i].itemId}}).then(r=>{
           this.items.push(r.data.data.data[0])
           this.addItemList.push(r.data.data.data[0].id)
           t++;
           console.log(t+"-------"+this.itemIds.length)
           if(t == this.itemIds.length){
              this.$nextTick(()=>{
               this.addItemList.forEach(itemId=>{
                 this.allItem.forEach(item=>{
                   console.log(itemId+"---"+item.id)
                   if(item.id==itemId)this.toggleSelection(item);
                 })
               })
             })
           }




         })
       }
       //  this.$nextTick(()=>{
       //   console.log(1111)
       //   this.addItemList.forEach(itemId=>{
       //     this.items.forEach(item=>{
       //       console.log(itemId+"---"+item.id)
       //       if(item.id==itemId)this.toggleSelection(item);
       //     })
       //   })
       // })


    })


    axios.post('http://localhost:8080/package/search/'+1+'/'+1,{other:{id:this.$route.params.id}}).then(r=>{
      this.form=r.data.data.data[0];
      this.form.renew+=''
      this.form.state+=''

      axios.get('http://localhost:8080/package-images-contact/'+this.$route.params.id).then(r=>{
        this.form.images=r.data.data;
        this.imagesV=true;
        this.$forceUpdate();

      })
    })





    this.getLevel();
  },
  mounted() {



    }


}
</script>

<style scoped>
.line{
  text-align: center;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>


